import React,{useEffect} from 'react'
import * as echarts from "echarts"
import chinaJSON from "../../assetst/json/china.json"
export default function Earth() {
  useEffect(()=>{
    echartsInit()
  },[])
  const echartsInit=()=>{
    const myChart =echarts.init( document.getElementById("main"))
    echarts.registerMap("china",chinaJSON);
    var option = {
       tooltip:{// 提示框组件的通用介绍：
        show:true,
        trigger:"item"
       },
       //visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
       visualMap:{
        type: "piecewise",
        orient: "vertical",
        pieces: [
          { min: 0, max: 0, color: "#fff" },
          { min: 1, max: 10, color: "#fdfdcf" },
          { min: 10, max: 100, color: "#fe9e83" },
          { min: 100, max: 1000, color: "#e55a4e" },
          { min: 1000, max: 10000, color: "#4f070d" },
      ]
       },
        series:[
            {  
                name: "中国地图", // 名称
                type:"map", // 类型
                map:"china", 
                zoom: 1.2,//缩放
                roam:true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                aspectScale: 0.75, //这个参数用于 scale 地图的长宽比，如果设置了projection则无效。geoBoundingRect.width / geoBoundingRect.height * aspectScale。
                label:{
                    show:true,
                    fontSize:5
                },
                itemStyle:{ //地图区域的多边形 图形样式。
                  areaColor:"#f1f1f1",
                  borderColor:"rgba(1,0,0,0.2)"
              },
              data: [
                { name: "内蒙古", value: 98 },
                { name: "新疆", value: 201 },
                { name: "西藏", value: 10 },
                { name: "青海", value: 14 },
                { name: "黑龙江", value: 301 }
            ]
            },
        ]
    }
    myChart.setOption(option)
  }
  return (
    <div>

    </div>
  )
}
